<template>
	<div>
		<div>
			<div>
				<el-row>
					<el-col :span="12">
						<div class="grid-content"></div>
					</el-col>
					<el-col :span="12">
						<div>
							<el-input placeholder="请输入内容" v-model="inputfid" class="input-with-select">
								<el-select v-model="select" slot="prepend" placeholder="请选择">
									<el-option label="货运单编号" value="1"></el-option>
								</el-select>
								<el-button slot="append" icon="el-icon-search" @click="findByFid()"></el-button>
							</el-input>
						</div>
					</el-col>
				</el-row>
			</div>
			<div>
				<el-table :data="tabledata" border style="width: 100%" :cell-style="{'text-align':'center'}"
					:header-cell-style="{'text-align':'center'}" :height="tableMaxHeight">
					<el-table-column fixed prop="fid" label="货运单编号" width="300">
					</el-table-column>
					<el-table-column prop="customerInformations.name" label="发货客户" width="120">
					</el-table-column>
					<el-table-column prop="customerIns.name" label="收货客户" width="120">
					</el-table-column>
					<el-table-column prop="customerInformations.address" label="发货地址" width="120">
					</el-table-column>
					<el-table-column prop="customerIns.address" label="收货地址" width="120">
					</el-table-column>
					<el-table-column prop="freightContracts.fare" label="运费(元)" width="120">
					</el-table-column>
					<el-table-column prop="freightContracts.insurancefare" label="保险费" width="120">
					</el-table-column>
					<el-table-column prop="freightContracts.freightLines.arrivetime" label="到货时间" width="200">
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="180">
						<template slot-scope="scope">
							<el-button type="primary" size="small" plain @click="handleEdit(scope.$index, scope.row)">
								货运单结算
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination style="text-align: right;" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-sizes="[5,10]"
					:page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
					:total="pageInfo.total">
				</el-pagination>
			</div>
			<div>
				<el-dialog title="结算操作" :visible.sync="dialogFormVisible">
					<el-row>
						<el-col :span="24">
							<el-form :model="updateform">
								<el-row>
									<el-col :span="12">
										<el-form-item label="货运单编号" :label-width="formLabelWidth">
											<el-input v-model="updateform.fid" autocomplete="off" disabled></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="客户名称" :label-width="formLabelWidth">
											<el-input v-model="updateform.customerInformations.name" autocomplete="off" disabled>
											</el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="12">
										<el-form-item label="保险费(元)" :label-width="formLabelWidth">
											<el-input v-model="updateform.freightContracts.insurancefare"
												autocomplete="off" disabled></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="运费(元)" :label-width="formLabelWidth">
											<el-input v-model="updateform.freightContracts.fare" autocomplete="off" disabled>
											</el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="12">
										<el-form-item label="本单金额(元)" :label-width="formLabelWidth">
											<el-input v-model="updateform.onemoney" autocomplete="off" disabled></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="已收金额(元)" :label-width="formLabelWidth" required>
											<el-input v-model="updateform.moneyed" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</el-col>
					</el-row>
					<div slot="footer" class="dialog-footer" style="text-align: center;">
						<el-button @click="isupdate()">取消</el-button>
						<el-button type="primary" @click="update()">保存</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				inputfid: '',
				select: '',
				//tableData: [],
				//当前页
				currentPage: 1,
				//每页显示条数
				pageSize: 5,
				//
				tabledata: [],
				pageInfo: {},
				dialogFormVisible: false,
				updateform: {
					fid: '',
					freightContracts: '',
					customerInformations: '',
					customerIns: '',
					onemoney: '',
					moneyed: ''
				},

				formLabelWidth: '120px'
			}
		},
		methods: {
			handleSizeChange(val) {
				//console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				//console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getList();
			},
			//结算
			handleEdit(index, row) {
				console.log(index, row);
				this.dialogFormVisible = true;
				this.updateform = {
					...row
				};

			},
			getList() {
				//发送ajax
				this.axios.get("http://localhost:8080/freightSettle/" + this.currentPage + "/" + this.pageSize).then(
					res => {
						console.log(res.data.data);
						//this.pageInfo = res.data.data;
						let tData = [];
						let j = 0;
						for (let i = 0; i < res.data.data.list.length; i++) {
							if (res.data.data.list[i].isSettle != 1) {
								tData[j] = res.data.data.list[i]
								j++;
							}
						}

						this.tabledata = tData;
						this.pageInfo.total = tData.length;
					})
			},
			update() {
				//发送ajax
				this.axios.put("http://localhost:8080/freightSettle", {
					"id": this.updateform.id,
					"isSettle": 1,
					"moneyed": this.updateform.moneyed
				}).then(
					res => {
						//this.updateform = {};
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.dialogFormVisible = false;
						this.getList();
					})
			},
			//没结算
			isupdate() {
				this.$message({
					message: '结算失败',
					type: 'warning'
				});
				this.dialogFormVisible = false
			},
			//搜索功能
			findByFid() {
				//发送ajax
				this.axios.get("http://localhost:8080/freightSettle/" + this.inputfid).then(
					res => {
						//console.log(res.data.data);
						this.tabledata = [];
						var re = [];

						if (res.data.data.isSettle != 1) {
							re.push(res.data.data);
							this.tabledata = re;
							this.$message({
								message: res.data.msg,
								type: 'success'
							});
							this.pageInfo.total = 1;
						}else{
							this.$message({
								message: '订单已结算',
								type: 'warning'
							});
							this.pageInfo.total = 0;
						}
						
						console.log(this.tabledata);
					})
			}
		},
		computed: {
			tableMaxHeight() {
				return window.innerHeight - 170 + 'px';
			}
		},
		//初始化数据
		created() {
			this.getList();
		}
	}
</script>

<style>
</style>
